<template>
  <ul class="catagtory">
    <!-- <li v-for="v in categoryList" :key="v.id" :class="{ select: v.id === currentCateory.id }">
      {{ v.name }}
    </li> -->
    <!-- @click="$store.commit('category/updateCurrent', v)" -->
    <li
      v-for="v in list"
      :key="v.id"
      :class="{ select: v.id === current.id }"
      @click="updateCurrent(v)"
    >
      {{ v.name }}
    </li>
  </ul>
</template>

<script>
// import { mapGetters } from 'vuex';
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  name: 'Category',
  computed: {
    // 第一个参数category是限定模块空间
    ...mapState('category', ['list', 'current']),
    // ...mapGetters(['categoryList', 'currentCategory']),
  },
  methods: {
    ...mapMutations('category', ['updateCurrent']),
    ...mapActions('category', ['getList']),
  },
  created() {
    // this.$store.dispatch('category/getList');
    this.getList();
  },
};
</script>
